<template>
  <div class="bao">
    <div class="tou">
      <div :class="{act:conn == index}" class="qiang" v-for="(item,index) in arr1" :key="index" @click="fun(index)"> {{item}} </div>
    </div>
   <div class="kuo" v-for="(item,index) in arr" :key="index">
    <div class="imgbox">
        <img :src=item.img alt="">
    </div>
    <div class="xinxi">
        <p>汉堡王 | 北美新天地餐厅</p>
        <h3 class="biao"> {{item.biao}} </h3>
        <div class="xiabian">
            <div class="bao">
                <p class="tuan"> {{item.tuan}} </p>
                <span class="jia">￥{{item.jia}}</span><span class="zhe">{{item.zhe}}</span>
                <div class="del">
                <del class="shan">￥{{item.shan}}</del>
                </div>
            </div>
            <div class="qiang">
                <div class="ma"> {{item.ma}} </div>
                <div class="shou"> {{item.shou}} </div>
            </div>
        </div>
    </div>

</div>
  </div>
</template>

<script>
var img1 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1016%252Fc65f94e3j00r11whl000tc000b400b4c.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668270278&t=b7df5561ab569d5ee186da1538b7d585";
var img2 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1016%252F1fd4456cj00r11whl000sc000b400b4c.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668270322&t=046d0b8770665a2aebc5744b5950c5ae";
var img3 = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.16pic.com%2F00%2F20%2F98%2F16pic_2098670_b.jpg&refer=http%3A%2F%2Fphoto.16pic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668270394&t=31b2b203c3cded193ac60aab40c0bddd";

import {shop_list,tuan_list} from './components/utils/api'

export default {
    data(){
        return{
            conn:0,
            arr1:["正在抢购","上新预告"],
            arr:[
                {img:img1,biao:"买一送一明星汉堡|用心火烤肉质紧实 爆爆团",tuan:"爆爆团价",jia:"25",zhe:"5折",shan:"50",ma:"马上抢" ,shou:"已售9029份"},
                {img:img2,biao:"华莱士|聚划算单人套餐 进店必选",tuan:"爆爆团价",jia:"12",zhe:"3.9折",shan:"31.2",ma:"马上抢" ,shou:"已售173份"},
                 {img:img3,biao:"白老大小米果仁酥220g【 爆爆团 】",tuan:"爆爆团价",jia:"10",zhe:"2折",shan:"20",ma:"马上抢" ,shou:"已售29份"},
                
            ],

        }
    },
    methods:{
        fun(index){
            this.conn = index;
        },
    },
      mounted(){
    // 请求 爆爆团-正在抢购列表
    tuan_list( {status:1} ).then((res)=>{
      console.log(res.data);
    })

      }

}
</script>

<style lang="scss"scoped >
.tou{
    width: 200px;
    height: 35px;
    display: flex;
    background-color: rgb(221, 107, 107);
    font-size: 16px;
    color: #ffffff;
    margin: 30px 0px 15px 5px;
    line-height: 35px;
}
.tou .qiang{
    text-align: center;
    width: 100px;
    height: 35px;
}
.tou .act{
    font-size: 18px;
    font-weight: bold;
}
.kuo{
    display: flex;
    width: 93%;
    height: 190px;
    background-color: #f0f0f0;
    border-radius: 7px;
    margin: auto;
    margin-bottom: 10px;
}
 img{
    width: 140px;
    height: 140px;
    border-radius: 5px;
    padding: 5px;
    padding-top: 25px;
}
 .kuo .xinxi .xiabian{
    display: flex;
}
.kuo .xinxi p{
    margin: 8px 6px;
    color: #928d8d;
}
.bigbox .kuo .xinxi .xiabian .tuan{
    color: red;
    font-size: 14px;
    margin: 5px 3px;
}
.kuo .xinxi .xiabian .jia{
    color: red;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
}
.kuo .xinxi .xiabian .zhe{
    color: red;
    border: solid 1px red;
    font-size: 7px;
}
.kuo .xinxi .xiabian .del{
    color: #b6aaaa;
    margin-top: 10px;
}
 .kuo .xinxi .xiabian .qiang{
    margin-top: 20px;
    margin-left: 40px;
} 
 .kuo .xinxi .xiabian .qiang .ma{
    width: 80px;
    height: 40px;
    background-color: red;
    border-radius: 25px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    margin-bottom: 10px;
}
.kuo .xinxi .xiabian .qiang .shou{
    color: red;
    font-size: 12px;
    text-align: center;
}
</style>